import BarChart from "@/components/BarChart/BarChart";
import './Home.scss';
import RadarChart from "@/components/RadarChart/RadarChart";
import Earth3DChart from "@/components/Earth3DChart/Earth3DChart";
import GaugeChart from "@/components/GaugeChart/GaugeChart";

// 主页Home页面
const Home = () => {
    // 表单选项
    const barChartOptions = {
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [[120, 200, 150, 80, 70, 110, 130]],
    };
    const radarChartOptions = {
        indicator: ['A', 'B', 'C', 'D', 'E'],
        seriesData: [[120, 118, 130, 100, 99, 70], [100, 93, 50, 90, 70, 60]],
    };
    return (
        <div className="home-charts">
            <div className="chart-colomn">
                <div className="chart-aside">
                    <div className="main-chart base-chart"><RadarChart options={radarChartOptions} /></div>
                    <div className="sub-chart base-chart"><BarChart options={barChartOptions} /></div>
                </div>
                <div className="chart-center">
                    <div className="main-chart base-chart"><Earth3DChart /></div>
                </div>
                <div className="chart-aside">
                    <div className="main-chart base-chart"><GaugeChart /></div>
                    <div className="sub-chart base-chart"></div>
                </div>
            </div>
            <div className="chart-colomn">
                <div className="item-chart">
                    <div className="base-chart"></div>
                </div>
                <div className="item-chart">
                    <div className="base-chart"></div>
                </div>
                <div className="item-chart">
                    <div className="base-chart"></div>
                </div>
                <div className="item-chart">
                    <div className="base-chart"></div>
                </div>
            </div>
        </div >
    );
};

export default Home;